<template>
  <div>
    <el-card class="mapBox">
      <div id="viewMap"></div>
      <!-- 头部 -->
      <div class="header">
        <div class="title">智慧市域社会治理</div>
        <div class="tabs">
          <div class="tab active">全域态势</div>
          <div class="tab">常态指挥</div>
          <div class="tab">重点人员</div>
        </div>
        <div class="status">
          <div class="time">{{ time }}</div>
          <div class="date">
            <div>{{ week }}</div>
            <div>{{ dateInfo }}</div>
          </div>
          <div class="weather">
            <div><img :src="'assets/icon' + weather.weather" alt="" class="icon" /></div>
            <div>{{ weather.temperature }}℃</div>
          </div>
          <div class="user">
            <div class="name">{{ username }}</div>
            <div class="role">指挥中心调度员</div>
          </div>
        </div>
      </div>
      <!-- 卫星图选择框 -->
      <div class="tootl">
        <el-button @click="gpsBut" size="mini" type="primary" plain>卫星图</el-button>
        <el-select
          v-model="mapStyle"
          placeholder="请选择"
          @change="styleChange"
          size="mini"
          style="width: 100px; margin-left: 10px"
        >
          <el-option label="幻影黑" value="dark"> </el-option>
          <el-option label="远山黛" value="whitesmoke"> </el-option>
          <el-option label="雅士灰" value="grey"> </el-option>
          <el-option label="靛青蓝" value="blue"> </el-option>
          <el-option label="极夜蓝" value="darkblue"> </el-option>
        </el-select>
      </div>
      <!-- 图层选择器 -->
      <ul :class="{ levelBox: true, levelActive: levelMeun }">
        <el-menu class="levelMeun" :default-openeds="defaultOpeneds">
          <el-submenu v-for="item in layerInfo" :key="item.name" :index="item.name">
            <template slot="title">
              <div class="levelTitleBox">
                <span class="levelTitle">{{ item.name }}</span>
              </div>
            </template>
            <el-menu-item v-for="jtem in item.values" :key="jtem.name" v-show="jtem.show">
              <div class="levelItem">
                <div class="labelBox">
                  <img :src="jtem.icon" class="img" alt="" />
                  <span>{{ jtem.name }}</span>
                </div>
                <div class="labelBox">
                  <span class="num">{{ jtem.count }}</span>
                  <el-checkbox v-model="jtem.select" size="mini" @change="e => checkChange(e, jtem)"></el-checkbox>
                </div>
              </div>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="0">
            <template slot="title">
              <div class="levelTitleBox">
                <span class="levelTitle">设备设施</span>
              </div>
            </template>
            <el-menu-item>
              <div class="levelItem">
                <div class="labelBox">
                  <img src="@/assets/icon7.png" class="img" alt="" />
                  <span>普通监控</span>
                </div>
                <div class="labelBox">
                  <span class="num">0</span>
                  <el-checkbox size="mini"></el-checkbox>
                </div>
              </div>
            </el-menu-item>
            <el-menu-item>
              <div class="levelItem">
                <div class="labelBox">
                  <img src="@/assets/icon15.png" class="img" alt="" />
                  <span>移动设备</span>
                </div>
                <div class="labelBox">
                  <span class="num">0</span>
                  <el-checkbox size="mini"></el-checkbox>
                </div>
              </div>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <div class="levelTitleBox">
                <span class="levelTitle">重点人员</span>
              </div>
            </template>
            <el-menu-item>
              <div class="levelItem">
                <div class="labelBox">
                  <img src="@/assets/icon10.png" class="img" alt="" />
                  <span>涉毒人员</span>
                </div>
                <div class="labelBox">
                  <span class="num">0</span>
                  <el-checkbox size="mini"></el-checkbox>
                </div>
              </div>
            </el-menu-item>
            <el-menu-item>
              <div class="levelItem">
                <div class="labelBox">
                  <img src="@/assets/icon11.png" class="img" alt="" />
                  <span>涉军人员</span>
                </div>
                <div class="labelBox">
                  <span class="num">0</span>
                  <el-checkbox size="mini"></el-checkbox>
                </div>
              </div>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </ul>
      <div class="levelBut" @click="levelMeun = !levelMeun">要素筛选</div>
      <!-- 右侧列 -->
      <div class="dataColumn rightBox">
        <div class="title">事件办理</div>
        <!-- 事件统计 -->
        <div class="itemBox">
          <div class="item sjBg">
            <div class="label">事件总数</div>
            <div class="cont">
              <span>{{ eventDate['事件总数'] }}</span> <span class="unit">件</span>
            </div>
          </div>
          <div class="item sjBg">
            <div class="label">本月新增</div>
            <div class="cont">
              <span>{{ eventDate['本月新增数'] }}</span> <span class="unit">件</span>
            </div>
          </div>
          <div class="item sjBg">
            <div class="label">本月办结</div>
            <div class="cont">
              <span>{{ eventDate['本月办结'] }}</span> <span class="unit">件</span>
            </div>
          </div>
        </div>
        <!-- 事件来源 状态 -->
        <div class="itemBox">
          <div class="sItem">
            <div class="sItem_title"><i class="el-icon-caret-right icon"></i> 事件来源</div>
            <div class="sItem_cont">
              <div class="echart" id="eventSource"></div>
            </div>
          </div>
          <div class="sItem">
            <div class="sItem_title"><i class="el-icon-caret-right icon"></i> 事件状态</div>
            <div class="sItem_cont">
              <div class="echart echartBarBg" id="eventStatus"></div>
            </div>
          </div>
        </div>
        <!-- 办处走势 -->
        <div class="itemBox">
          <div class="oItem">
            <div class="oItem_title"><i class="el-icon-caret-right icon"></i> 办处走势</div>
            <div class="oItem_cont">
              <div class="echart" id="officeTrend"></div>
            </div>
          </div>
        </div>
        <div class="title">网格人员</div>
        <!-- 网格人员 -->
        <div class="itemBox">
          <div class="item wgNumBg">
            <div class="wgLabel">{{ gridStaff[0]?.name }}</div>
            <div class="wgCont">
              <span>{{ gridStaff[0]?.count }}</span> <span class="unit">人</span>
            </div>
          </div>
          <div class="item wgBg">
            <div class="wgTitle">网格人员</div>
          </div>
          <div class="item wgNumBg">
            <div class="wgLabel">{{ gridStaff[1]?.name }}</div>
            <div class="wgCont">
              <span>{{ gridStaff[1]?.count }}</span> <span class="unit">人</span>
            </div>
          </div>
        </div>
        <!-- 网格员分布 -->
        <div class="itemBox">
          <div class="oItem">
            <div class="oItem_title"><i class="el-icon-caret-right icon"></i> 网格员分布</div>
            <div class="oItem_cont">
              <div class="echart" id="gridDistribution"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 左侧列 -->
      <div class="dataColumn leftBox">
        <div class="title">城市设备</div>
        <div class="itemBox">
          <div class="item sbBg">
            <div class="label">设备总数</div>
            <div class="cont"><span>2</span> <span class="unit">台</span></div>
          </div>
          <div class="item sbBg">
            <div class="label">在线数量</div>
            <div class="cont"><span>0</span> <span class="unit">台</span></div>
          </div>
          <div class="item sbBg">
            <div class="label">在线率</div>
            <div class="cont"><span>0%</span> <span class="unit"></span></div>
          </div>
        </div>
        <div class="itemBox">
          <div class="oItem">
            <div class="oItem_title"><i class="el-icon-caret-right icon"></i> 设备类型</div>
            <div class="oItem_cont">
              <div class="echart deviceType" id="deviceType"></div>
            </div>
          </div>
        </div>
        <div class="itemBox">
          <div class="oItem">
            <div class="oItem_title"><i class="el-icon-caret-right icon"></i> 设备分布</div>
            <div class="oItem_cont">
              <div class="echart" id="deviceDistribution"></div>
            </div>
          </div>
        </div>
        <div class="title">重点企业</div>
        <div class="itemBox">
          <div class="item qyBg">
            <div class="label">企业数量</div>
            <div class="cont">
              <span>{{ enterpriseData[0]?.enterpriseCount + enterpriseData[1]?.enterpriseCount }}</span>
              <span class="unit">家</span>
            </div>
          </div>
          <div class="item qyBg">
            <div class="label">{{ enterpriseData[0]?.typeName }}</div>
            <div class="cont">
              <span>{{ enterpriseData[0]?.enterpriseCount }}</span> <span class="unit">家</span>
            </div>
          </div>
          <div class="item qyBg">
            <div class="label">{{ enterpriseData[1]?.typeName }}</div>
            <div class="cont">
              <span>{{ enterpriseData[1]?.enterpriseCount }}</span> <span class="unit">家</span>
            </div>
          </div>
        </div>
        <div class="itemBox">
          <div class="oItem">
            <div class="oItem_title"><i class="el-icon-caret-right icon"></i> 企业类别</div>
            <div class="oItem_cont">
              <div class="echart" id="enterprise" style="height: 163px"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 企业信息 -->
      <!-- <div class="echart" id="population"></div> -->
    </el-card>
  </div>
</template>

<script>
import * as api from '@/api/map'
import AMapLoader from '@amap/amap-jsapi-loader'
import * as vApi from '@/api/dataVisu'
export default {
  data() {
    return {
      // 地图事件
      map: null,
      // 当前编辑的网格对象
      mapStyle: 'dark',
      levelMeun: false,
      levelBox: {
        pop: null,
        markers: [],
        duty: null,
        unit: null,
        village: null,
        town: null,
        county: null,
        city: null,
        labels: [],
      },
      layerInfo: [],
      gpsMap: null,
      gpsState: true,
      time: null,
      timer: null,
      dateInfo: '',
      week: '',
      username: '',
      weather: {
        weather: '',
        temperature: '',
      },
      eventDate: {},
      gridStaff: [],
      enterpriseData: [],
      defaultOpeneds: ['0', '5'],
    }
  },
  mounted() {
    this.init()
    this.getEnterprise()
    this.getLayerInfo()
    // this.getPopulation()
    this.timeStart()
    this.dateInfo = this.showtime()
    this.week = this.showweek()
    this.username = localStorage.getItem('fullName')
    this.getWeather()
    this.getEventStatus()
    this.getOfficeTrend()
    this.getGridDistribution()
    this.getDeviceType()
    this.getDeviceDistribution()
  },
  methods: {
    // 初始化地图
    init() {
      AMapLoader.load({
        key: '30f0645cbadb0e5f302e20e86b3e627f',
        version: '2.0',
        plugins: ['AMap.Polygon', 'AMap.GeoJSON', 'AMap.HeatMap'],
      }).then(AMap => {
        this.gpsMap = [new AMap.TileLayer.Satellite(), new AMap.createDefaultLayer()]
        this.map = new AMap.Map('viewMap', {
          mapStyle: 'amap://styles/dark',
          showBuildingBlock: true,
          showLabel: true,
          layers: this.gpsMap,
          center: [113.89362474, 23.14630753],
          zoom: 14,
        })
        this.getGridBoundary(2, 'village')
        // this.getPopHot()
        this.getInformation()
      })
    },
    // 获取随机颜色
    getCasualeColor() {
      let random = Math.random()
      if (random < 0.07) {
        random = Math.random()
      }
      let num = Math.floor(random * 16777215).toString(16)
      if (num.length < 6) {
        num += '1'
      }
      return '#' + num
    },
    // 获取所有网格边界
    getGridBoundary(id, name) {
      let list = [
        // { id: 0, name: 'duty' },
        { id: 1, name: 'unit' },
        { id: 2, name: 'village' },
        { id: 3, name: 'town' },
        { id: 4, name: 'county' },
        { id: 5, name: 'city' },
      ]
      api.getAllGrid({ level: id }).then(res => {
        if (res.code == '200') {
          this.initBoundary(res.data, name)
        }
      })
    },
    // 初始化所有边界网格
    initBoundary(json, level = 0) {
      let that = this
      this.levelBox[level] = new AMap.GeoJSON({
        geoJSON: json,
        getPolygon: function (geojson, lnglats) {
          let pol = new AMap.Polygon({
            path: lnglats,
            fillOpacity: 0,
            strokeColor: geojson.properties.stroke ?? that.getCasualeColor(),
            strokeWeight: 3,
            zIndex: 0,
          })
          return pol
        },
      })
      that.map.add(this.levelBox[level])
    },
    // 修改地图样式
    styleChange(e) {
      this.map.setMapStyle('amap://styles/' + e)
    },
    // 获取人口热力图数据
    async getPopHot() {
      let that = this
      this.levelBox.pop = new AMap.HeatMap(that.map, {
        radius: 50, //给定半径
        opacity: [0, 1],
        gradient: {
          0.5: 'blue',
          0.65: 'rgb(117,211,248)',
          0.7: 'rgb(0, 255, 0)',
          0.9: '#ffea00',
          1.0: 'red',
        },
      })
      let htoData = await vApi.peopleDistribution()
      this.levelBox.pop.setDataSet({
        data: htoData.data,
        max: 20,
      })
    },
    // 创建企业坐标点
    async getInformation() {
      let that = this
      // 图标
      let icon = new AMap.Icon({
        size: new AMap.Size(28, 33),
        image: require('@/assets/icon21.png'),
        imageSize: new AMap.Size(28, 33),
      })
      // 窗体
      let infoWindow = new AMap.InfoWindow({
        isCustom: true,
        offset: new AMap.Pixel(0, -55),
      })
      let infoData = await vApi.coordinatesList()
      for (let i = 0, info = infoData.data; i < info.length; i++) {
        const item = info[i]
        // 坐标点
        let marker = new AMap.Marker({
          icon: icon,
          position: item.coordinate,
          offset: new AMap.Pixel(-10, -14),
          visible: false,
        })
        // 标签
        let label = new AMap.Marker({
          content:
            '<div class="amap-info-window">' + item.enterpriseName + '<div class="amap-info-sharp"></div>' + '</div>',
          position: item.coordinate,
          visible: false,
          offset: new AMap.Pixel(-100, -45),
          zIndex: 18,
          visible: false,
        })
        marker.on('click', function () {
          let content = []
          // content.push('公司名称：' + item.enterpriseName)
          content.push('成立时间：' + item.establishmentDate)
          content.push('经营范围：' + item.businessScope)
          content.push('占地面积：' + item.floorSpace)
          content.push('建筑面积：' + item.floorage)
          content.push('企业负责人：' + item.superintendent)
          content.push('负责人电话：' + item.superintendentPhone)
          content.push('地址：' + item.addressEnterprise)
          infoWindow.setContent(that.createInfoWindow(item.enterpriseName, content.join('<br/>')))
          infoWindow.open(that.map, marker.getPosition())
        })
        // 监听地图缩放
        that.map.on('zoomchange', e => {
          let zoom = that.map.getZoom()
          let iconSize
          let sele = null
          that.layerInfo.forEach(item => {
            if (item.name == '企业') {
              sele = item.values[0].select
            }
          })
          if (zoom > 15 && sele) {
            iconSize = new AMap.Size(2 * zoom, 2.3 * zoom)
            label.show()
          } else {
            iconSize = new AMap.Size(1.6 * zoom, 1.84 * zoom)
            label.hide()
          }
          let newIcon = new AMap.Icon({
            size: iconSize,
            image: require('@/assets/icon21.png'),
            imageSize: iconSize,
          })
          // 更新标记的图标
          marker.setIcon(newIcon)
        })
        this.levelBox.labels.push(label)
        this.levelBox.markers.push(marker)
      }
      this.map.add([...this.levelBox.markers, ...this.levelBox.labels])
    },
    // 创建企业信息弹窗
    createInfoWindow(title, content) {
      var info = document.createElement('div')
      info.className = 'content-window-card'

      //可以通过下面的方式修改自定义窗体的宽高
      info.style.width = '400px'
      // 定义顶部标题
      var top = document.createElement('div')
      var titleD = document.createElement('div')
      var closeX = document.createElement('div')
      top.className = 'info-top'
      titleD.innerHTML = title
      closeX.className = 'info-close'
      closeX.innerHTML = '×'
      closeX.onclick = () => {
        this.map.clearInfoWindow()
      }
      top.appendChild(titleD)
      top.appendChild(closeX)
      info.appendChild(top)

      // 定义中部内容
      var middle = document.createElement('div')
      middle.className = 'info-middle'
      middle.style.backgroundColor = 'white'
      middle.innerHTML = content
      info.appendChild(middle)
      return info
    },
    // 选择图层
    checkChange(e, item) {
      if (item.layer == 'markers') {
        if (e) {
          this.levelBox.markers.forEach(res => {
            res.show()
          })
          this.levelBox.labels.forEach(res => {
            res.show()
          })
        } else {
          this.levelBox.markers.forEach(res => {
            res.hide()
          })
          this.levelBox.labels.forEach(res => {
            res.hide()
          })
        }
      } else {
        if (this.levelBox[item.layer]) {
          if (e) {
            this.levelBox[item.layer].show()
          } else {
            this.levelBox[item.layer].hide()
          }
        } else {
          this.getGridBoundary(item.id, item.layer)
        }
      }
    },
    // 获取企业统计信息
    async getEnterprise() {
      let htoData = await vApi.enterpriseCount()
      this.enterpriseData = htoData.data
      let enter = []
      for (const item of this.enterpriseData) {
        enter.push({
          value: item.enterpriseCount,
          name: item.typeName,
        })
      }
      let myChart = this.$echarts.init(document.getElementById('enterprise'))
      let option = {
        color: ['#85d733', '#11bb9d', '#37A2FF', '#FFBF00'],
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          top: '5%',
          left: 'right',
          itemWidth: 14,
          itemSrtle: {},
          textStyle: {
            color: '#fff',
          },
          formatter: name => {
            let obj = enter.find(item => {
              return item.name == name
            })
            return obj.name + '-' + obj.value + '家'
          },
        },
        series: [
          {
            name: '企业类型',
            type: 'pie',
            radius: ['20%', '50%'],
            left: '-25%',
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              alignTo: 'edge',
              margin: '40%',
              formatter: '{name|{b}}\n{time|{c} 家}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              color: '#fff',
              rich: {
                time: {
                  fontSize: 10,
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              borderWidth: 0,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 10,
                color: '#fff',
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '#fff',
              },
            },
            labelLine: {
              show: false,
            },
            data: enter,
          },
        ],
      }
      myChart.setOption(option)
    },
    // 获取选择统计信息
    getLayerInfo() {
      vApi.summaryData().then(res => {
        if (res.code == '200') {
          this.layerInfo = res.data
          this.layerInfo.forEach(item => {
            this.defaultOpeneds.push(item.name)
            if (item.name == '工作人员') {
              this.gridStaff = item.values
            }
            for (const iter of item.values) {
              switch (iter.name) {
                case '网格事件':
                  iter.icon = require('@/assets/icon12.png')
                  iter.layer = ''
                  iter.select = false
                  iter.show = true
                  break
                case '执法人员':
                  iter.icon = require('@/assets/icon4.png')
                  iter.layer = ''
                  iter.select = false
                  iter.show = true
                  break
                case '专职网格员':
                  iter.icon = require('@/assets/icon20.png')
                  iter.layer = ''
                  iter.select = false
                  iter.show = true
                  break
                case '重点企业':
                  iter.icon = require('@/assets/icon21.png')
                  iter.layer = 'markers'
                  iter.select = false
                  iter.show = true
                  break
                case '单元':
                  iter.icon = require('@/assets/icon19.png')
                  iter.layer = 'unit'
                  iter.select = false
                  iter.show = true
                  iter.id = 1
                  break
                case '责任格':
                  iter.icon = require('@/assets/icon19.png')
                  iter.layer = 'duty'
                  iter.select = false
                  iter.show = false
                  iter.id = 0
                  break
                case '村级':
                  iter.icon = require('@/assets/icon16.png')
                  iter.layer = 'village'
                  iter.select = true
                  iter.show = true
                  iter.id = 2
                  break
                case '镇级':
                  iter.icon = require('@/assets/icon17.png')
                  iter.layer = 'town'
                  iter.select = false
                  iter.show = true
                  iter.id = 3
                  break
                case '区县级':
                  iter.icon = require('@/assets/icon3.png')
                  iter.layer = 'county'
                  iter.select = false
                  iter.show = true
                  iter.id = 4
                  break
                case '市级':
                  iter.icon = require('@/assets/icon18.png')
                  iter.layer = 'city'
                  iter.select = false
                  iter.show = true
                  iter.id = 5
                  break
                default:
                  iter.icon = ''
                  iter.layer = ''
                  iter.select = false
                  iter.show = false
                  break
              }
            }
          })
        }
      })
    },
    // 获取人口统计数据
    async getPopulation() {
      let htoData = await vApi.populationByAge()
      let source = [['', '年龄段数量（人）']]
      for (const item of htoData.data) {
        source.push([item.name, item.count])
      }
      let myChart = this.$echarts.init(document.getElementById('population'))
      let option = {
        legend: {
          show: false,
        },
        textStyle: {
          color: '#fff',
        },
        tooltip: {},
        dataset: {
          source,
        },
        xAxis: {
          type: 'category',
          gridIndex: 0,
          axisLine: {
            lineStyle: {
              color: 'white',
            },
          },
        },
        yAxis: {
          gridIndex: 0,
          axisLine: {
            lineStyle: {
              color: 'white',
            },
          },
        },
        series: [
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
        ],
        grid: {
          containLabel: true,
          left: '5%',
          right: '10%',
          bottom: '10%',
          top: '10%',
          width: '90%',
          height: '80%',
        },
      }
      myChart.setOption(option)
    },
    // 事件状态
    async getEventStatus() {
      let htoData = await vApi.mattersSummaryData()
      this.eventDate = htoData.data
      let enter = [
        {
          value: this.eventDate['已办结'],
          name: '已办结',
        },
        {
          value: this.eventDate['审核中'],
          name: '审核中',
        },
        {
          value: this.eventDate['误判事件'],
          name: '误判事件',
        },
      ]
      let myChart = this.$echarts.init(document.getElementById('eventStatus'))
      let option = {
        color: ['#1f7ed6', '#a68cdb', '#73ffff', '#FF0087', '#FFBF00'],
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br />{b}{c} 件',
        },
        series: [
          {
            name: '事件状态',
            type: 'pie',
            radius: ['62%', '75%'],
            left: '0%',
            avoidLabelOverlap: false,
            colorBy: 'series',
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{c} 件}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              color: '#fff',
              rich: {
                time: {
                  fontSize: 10,
                  color: '#fff',
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '#fff',
              },
            },
            labelLine: {
              show: false,
            },
            data: enter,
          },
        ],
      }
      myChart.setOption(option)
      this.getEventSource()
    },
    // 事件来源
    getEventSource() {
      let enter = [
        {
          sub: '',
          name: '',
          value: 30,
        },
        {
          sub: this.eventDate['监控预警防火'],
          name: '监控预警防火',
          value: 60,
        },
        {
          sub: this.eventDate['网格员上报'],
          name: '网格员上报',
          value: 90,
        },
      ]
      let myChart = this.$echarts.init(document.getElementById('eventSource'))
      let option = {
        color: ['#95eaea', '#85d733', '#11bb9d'],
        tooltip: {
          trigger: 'item',
          formatter: (params, tciket, callback) => {
            if (params.data.name) {
              return `${params.data.name}：${params.data.sub}件`
            }
          },
        },
        series: [
          {
            name: '事件来源',
            type: 'funnel',
            left: '10%',
            top: 20,
            bottom: 20,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'ascending',
            gap: 0,
            label: {
              show: true,
              position: 'inside',
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid',
              },
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 0,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: enter,
          },
        ],
      }
      myChart.setOption(option)
    },
    // 办处走势
    async getOfficeTrend() {
      let htoData = await vApi.getMonthMatters()
      let myChart = this.$echarts.init(document.getElementById('officeTrend'))
      let xData = htoData.data.complete.map(item => {
        return item.month
      })
      let complete = htoData.data.complete.map(item => {
        return item.count
      })
      let report = htoData.data.report.map(item => {
        return item.count
      })
      let option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          type: 'scroll',
          data: ['上报事件', '办结事件'],
          top: 0,
          right: 0,
          textStyle: {
            color: '#fff',
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: 'white',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'white',
            },
          },
        },
        grid: {
          top: '20%',
          left: '0%',
          right: '0%',
          bottom: '5%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
        },
        textStyle: {
          color: '#fff',
        },
        series: [
          {
            name: '办结事件',
            data: complete,
            type: 'line',
            smooth: true,
          },
          {
            name: '上报事件',
            data: report,
            type: 'line',
            smooth: true,
          },
        ],
      }
      myChart.setOption(option)
    },
    // 切换卫星图
    gpsBut() {
      if (this.gpsState) {
        this.gpsMap[0].hide()
      } else {
        this.gpsMap[0].show()
      }
      this.gpsState = !this.gpsState
    },
    timeStart() {
      this.timer = setInterval(() => {
        let date = new Date()
        let hou = this.timeString(date.getHours())
        let min = this.timeString(date.getMinutes())
        let sec = this.timeString(date.getSeconds())
        this.time = `${hou}:${min}:${sec}`
      }, 1000)
    },
    // 时间双字化
    timeString(e) {
      let d = String(e)
      if (d.length === 1) {
        return 0 + d
      } else {
        return e
      }
    },
    // 显示时间
    showtime() {
      let nowdate = new Date()
      let year = nowdate.getFullYear(),
        month = nowdate.getMonth() + 1,
        date = nowdate.getDate()
      return year + '年' + month + '月' + date + '日'
    },
    // 显示星期
    showweek() {
      let nowdate = new Date()
      let day = nowdate.getDay(),
        week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      return week[day]
    },
    // 获取天气
    getWeather() {
      vApi.getWeather().then(res => {
        this.getWeatherIcon(res.lives[0].weather)
        this.weather.temperature = res.lives[0].temperature
      })
    },
    // 获取天气图标
    getWeatherIcon(value) {
      let state = ''
      if (value.indexOf('云')) {
        state = '23.svg'
      } else if (value.indexOf('晴')) {
        state = '24.svg'
      } else if (value.indexOf('风')) {
        state = '22.svg'
      } else if (value.indexOf('雨')) {
        state = '27.svg'
      } else if (value.indexOf('雪')) {
        state = '26.svg'
      } else if (value.indexOf('阴')) {
        state = '25.svg'
      } else {
        state = value
      }
      this.weather.weather = state
    },
    // 获取网格员分布
    getGridDistribution() {
      let myChart = this.$echarts.init(document.getElementById('gridDistribution'))
      let option = {
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#7373ff',
              },
              {
                offset: 1,
                color: '#bb99fa',
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            lineStyle: {
              color: 'white',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'white',
            },
          },
        },
        textStyle: {
          color: '#fff',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(180, 180, 180, 0.2)',
            // },
            itemStyle: {
              borderRadius: 5,
            },
            barWidth: '10px',
          },
        ],
        grid: {
          containLabel: true,
          left: '5%',
          right: '10%',
          bottom: '10%',
          top: '10%',
          width: '90%',
          height: '80%',
        },
      }
      myChart.setOption(option)
    },
    // 获取设备类型
    getDeviceType() {
      let enter = [
        {
          value: 12,
          name: '单兵',
        },
        {
          value: 18,
          name: '摄像头',
        },
      ]
      let myChart = this.$echarts.init(document.getElementById('deviceType'))
      let option = {
        color: ['#1f7ed6', '#a68cdb', '#73ffff', '#FF0087', '#FFBF00'],
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br />{b}{c} 台',
        },
        legend: {
          orient: 'vertical',
          top: '5%',
          left: 'right',
          itemWidth: 14,
          itemSrtle: {},
          textStyle: {
            color: '#fff',
          },
          formatter: name => {
            let obj = enter.find(item => {
              return item.name == name
            })
            return obj.name + '-' + obj.value + '台'
          },
        },
        series: [
          {
            name: '设备类型',
            type: 'pie',
            radius: ['67%', '75%'],
            left: '-25%',
            avoidLabelOverlap: false,
            colorBy: 'series',
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              alignTo: 'edge',
              margin: '29%',
              formatter: '{name|{b}}\n{time|{c} 台}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              color: '#fff',
              rich: {
                time: {
                  fontSize: 10,
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              borderWidth: 0,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '#fff',
              },
            },
            labelLine: {
              show: false,
            },
            data: enter,
          },
        ],
      }
      myChart.setOption(option)
    },
    // 获取设备分布
    getDeviceDistribution() {
      let myChart = this.$echarts.init(document.getElementById('deviceDistribution'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
          },
          formatter: function (params) {
            return params[0].name + ': ' + params[0].value + '台'
          },
        },
        legend: {
          orient: 'vertical',
          top: '5%',
          left: 'right',
          itemWidth: 14,
          itemSrtle: {},
          textStyle: {
            color: '#fff',
          },
        },
        xAxis: {
          data: ['里波', '湖山村', '中岗村', '鸾岗村', '窖吓村', '白沙村'],
          axisTick: { show: true },
          axisLine: {
            lineStyle: {
              color: 'white',
            },
          },
          axisLabel: {
            color: '#379bff',
          },
        },
        yAxis: {
          splitLine: { show: true },
          axisLabel: { show: true },
          axisLine: {
            lineStyle: {
              color: 'white',
            },
          },
        },
        color: ['#379bff'],
        grid: {
          top: '20%',
          left: '0%',
          right: '0%',
          bottom: '5%',
          containLabel: true,
        },
        series: [
          {
            name: '单位：台',
            type: 'pictorialBar',
            barCategoryGap: '-130%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              opacity: 0.5,
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            data: [52, 55, 60, 45, 82, 45],
            z: 10,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
}
</script>

<style lang="scss" scoped>
.mapBox {
  position: relative;
}
#viewMap {
  width: 100%;
  height: calc(100vh - 3px);
  ::v-deep .amap-info-window {
    width: 200px;
    background: #fff;
    border-radius: 3px;
    padding: 3px 7px;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
    text-align: center;
    font-size: 12px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  ::v-deep .amap-info-sharp {
    position: absolute;
    top: 21px;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
  }
  ::v-deep {
    .content-window-card {
      position: relative;
      box-shadow: none;
      bottom: 0;
      left: 0;
      width: auto;
      padding: 0;
    }

    .info-top {
      position: relative;
      display: flex;
      justify-content: space-between;
      background: none repeat scroll 0 0 #f9f9f9;
      border-bottom: 1px solid #ccc;
      border-radius: 5px 5px 0 0;
    }

    .info-top div {
      display: inline-block;
      color: #333333;
      font-size: 14px;
      font-weight: bold;
      line-height: 31px;
      padding: 0 10px;
    }
    .info-close {
      cursor: pointer;
    }

    .info-middle {
      font-size: 12px;
      padding: 10px 6px;
      line-height: 20px;
      border-radius: 0 0 5px 5px;
    }
  }
}
.tootl {
  position: absolute;
  display: block;
  right: 30px;
  top: 60px;
  border-radius: 6px;
  background-color: rgb(0, 0, 0, 0.5);
  box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 50%);
  padding: 10px;
}
.levelBut {
  position: absolute;
  right: 380px;
  bottom: 43px;
  border-radius: 6px;
  border: solid rgba(229, 229, 229, 0.568627451) 1px;
  background-color: rgba(2, 15, 24, 0.6);
  box-shadow: 0px 4px 5px 3px rgba(0, 0, 0, 0.4);
  padding: 10px;
  color: white;
  font-size: 15px;
  cursor: pointer;
}
.levelBox {
  position: absolute;
  right: 380px;
  bottom: 83px;
  border-radius: 6px;
  background-color: rgba(2, 15, 24, 0.6);
  color: white;
  font-size: 15px;
  height: 0px;
  overflow: hidden;
  &.levelActive {
    height: 731px;
    padding: 10px;
    border: solid rgba(229, 229, 229, 0.568627451) 1px;
    box-shadow: 0px 4px 5px 3px rgba(0, 0, 0, 0.4);
    transition: 800ms;
  }
  ::v-deep {
    .el-submenu__title {
      color: white;
      &:hover {
        background: none;
      }
      i {
        color: white;
      }
    }
    .el-menu {
      background: none;
    }
    .el-menu-item,
    .el-submenu__title {
      padding: 0 !important;
      color: white;
      height: 32px;
      line-height: 32px;
      min-width: 128px;
      &:hover {
        background: none;
      }
    }
    .el-submenu__icon-arrow {
      right: 0;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: rgb(4 0 255 / 27%);
      border-color: #939393;
      &::after {
        border: 2px solid #00ffff;
        border-left: 0;
        border-top: 0;
      }
    }
  }
  .levelMeun {
    width: 128px;
    border: none;
    background: none;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .levelTitleBox {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      .levelTitle {
        display: block;
        width: 100%;
        color: #bfebff;
        background: linear-gradient(to right, #365e6882 0%, #00000000 100%);
        padding: 0 10px;
        line-height: 22px;
        font-weight: bold;
      }
    }
  }
  .levelItem {
    display: flex;
    list-style-type: none;
    justify-content: space-between;
    align-items: center;
    width: 128px;
    padding: 3px 0;
  }
  .labelBox {
    display: flex;
    align-items: center;
    .num {
      color: #00ffff;
      margin-right: 5px;
    }
    .img {
      width: 20px;
      height: 23px;
      margin-right: 5px;
    }
  }
}
.countBox {
  position: absolute;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.404);
  box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 50%);
  width: 300px;
  &.enterprise {
    left: 30px;
    bottom: 30px;
  }
  &.grid {
    left: 30px;
    bottom: 230px;
  }
  &.population {
    bottom: 230px;
    left: 30px;
  }
  .title {
    color: #e3e3e3;
    font-size: 14px;
    border-bottom: 1px solid #4e4e4e;
    padding: 5px 10px;
  }
  .cont {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .echart {
      width: 300px;
      height: 150px;
    }
    .item {
      width: 33.3%;
      padding: 5px 20px;
      box-sizing: border-box;
      text-align: center;
      color: white;
      flex-wrap: wrap;
      .text {
        font-size: 12px;
      }
      .num {
        border-top: 1px solid #7f7f7f;
        font-size: 14px;
      }
    }
  }
}
.header {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 56px;
  line-height: 56px;
  top: 0;
  left: 0;
  .title {
    text-shadow: 2px 2px 2px rgba(0, 0, 0);
    font-size: 26px;
    padding-left: 60px;
    color: white;
  }
  .tabs {
    display: flex;
    .tab {
      width: 138px;
      text-align: center;
      font-size: 19px;
      font-weight: bold;
      color: #97e0ff;
      cursor: pointer;
      &.active {
        text-shadow: 2px 2px 2px rgba(0, 0, 0);
        border-bottom: solid 3px #97e0ff;
      }
    }
  }
  .status {
    text-shadow: 2px 2px 2px rgba(0, 0, 0);
    display: flex;
    line-height: 1;
    color: #fff;
    align-items: center;
    .time {
      font-size: 24px;
      padding-right: 4px;
    }
    .date {
      text-align: right;
      line-height: 14px;
      display: block;
      font-size: 12px;
      padding-right: 15px;
      border-right: solid 2px rgb(240, 240, 240);
    }
    .weather {
      display: flex;
      font-size: 22px;
      padding: 0 15px;
      align-items: center;
      .icon {
        margin-right: 5px;
        width: 50px;
        height: 50px;
      }
    }
    .user {
      text-align: center;
      padding: 0 15px;
      border-left: solid 2px rgb(240, 240, 240);
      .name {
        color: #fafc10;
        font-size: 14px;
        margin-bottom: 3px;
      }
      .role {
        font-size: 12px;
      }
    }
  }
}
.dataColumn {
  // display: none;
  position: absolute;
  width: 340px;
  border: solid #e5e5e591 1px;
  background-color: rgb(2 15 24 / 60%);
  padding: 0 10px;
  box-sizing: border-box;
  box-shadow: 0px 4px 5px 3px #00000066;
  border-radius: 4px;
  color: white;
  &.rightBox {
    right: 20px;
    top: 115px;
  }
  &.leftBox {
    left: 20px;
    top: 115px;
  }
  .title {
    font-size: 20px;
    line-height: 38px;
    padding-left: 5px;
    border-bottom: solid 1px #ffffff8c;
    font-weight: bold;
  }
  .itemBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item {
      margin-top: 10px;
      width: 31%;
      height: 68px;
      text-align: center;
      .label {
        font-size: 12px;
        font-weight: bold;
      }
      .cont {
        display: flex;
        font-size: 25px;
        justify-content: center;
        align-items: flex-end;
        .unit {
          font-size: 12px;
          color: #3a93ed;
          text-shadow: 2px 2px 2px rgba(0, 0, 0);
          line-height: 2.5;
          font-weight: bold;
        }
      }
      &.sjBg {
        background-image: url('@/assets/icon23.png');
        background-size: 124% 111%;
        background-position: 38% -122%;
        background-repeat: no-repeat;
      }
      &.sbBg {
        background-image: url('@/assets/icon22.png');
        background-size: 118% 103%;
        background-position: 49% -130%;
        background-repeat: no-repeat;
      }
      &.qyBg {
        background-image: url('@/assets/icon26.png');
        background-size: 118% 103%;
        background-position: 49% -130%;
        background-repeat: no-repeat;
      }
      &.wgBg {
        width: 100px;
        height: 100px;
        background-image: url('@/assets/icon25.png');
        background-size: 100% 100%;
        background-position: 38% -122%;
        background-repeat: no-repeat;
        margin: 10px 0 0;
        transform: rotate(45deg);
      }
      &.wgNumBg {
        width: 100px;
        height: 100px;
        background-image: url('@/assets/icon24.png');
        background-size: 100% 100%;
        background-position: 38% -122%;
        background-repeat: no-repeat;
        margin: 10px 0 0;
        .wgLabel {
          font-weight: bold;
          font-size: 12px;
          margin-top: 29px;
        }
        .wgCont {
          font-size: 20px;
          font-weight: bold;
          .unit {
            font-size: 12px;
          }
        }
      }
      .wgTitle {
        font-weight: bold;
        font-size: 16px;
        width: 40px;
        margin: 27px auto 0;
        transform: rotate(-45deg);
      }
    }
    .sItem {
      width: 50%;
      padding-top: 10px;
      text-align: left;
      .sItem_title {
        .icon {
          color: white;
        }
        font-size: 16px;
      }
      .sItem_cont {
        .echart {
          height: 130px;
          width: 159px;
          &.echartBarBg {
            background-image: url('@/assets/icon24.png');
            background-size: 46% 58%;
            background-position: 50% 53%;
            background-repeat: no-repeat;
          }
        }
      }
    }
    .oItem {
      width: 100%;
      padding-top: 10px;
      text-align: left;
      .oItem_title {
        .icon {
          color: white;
        }
        font-size: 16px;
      }
      .oItem_cont {
        .echart {
          height: 130px;
        }
        .deviceType {
          background-image: url('@/assets/icon24.png');
          background-size: 25% 60%;
          background-position: 33% 53%;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>
